<template>
  <Card title="活动编辑">
    <Form :model="saveCuVenuesBO" :label-width="130"  :rules="ruleValidate" style="width: 60vw" ref="formValidate">
      <FormItem label="科室:" style="width: 20vw" >
        <Select v-model="saveCuVenuesBO.cuVenuesCategoryId" >
          <Option v-for="item in cityList" :value="item.cuVenuesCategoryId" :key="item.cuVenuesCategoryId">{{ item.cuVenuesCategoryName }}</Option>
        </Select>
      </FormItem>
      <FormItem label="标题:"  style="width: 20vw" prop="cuVenuesTitle">
        <Input v-model="saveCuVenuesBO.cuVenuesTitle" placeholder="请输入标题"></Input>
      </FormItem>
      <FormItem label="类别:"  style="width: 20vw" prop="cuVenuesCateg">
        <Input v-model="saveCuVenuesBO.cuVenuesCateg" placeholder="请输入类别"></Input>
      </FormItem>
      <FormItem label="开放日期:"  style="width: 20vw" >
        <DatePicker type="datetimerange" :options="options3" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择开始结束时间" style="width: 15.5vw" v-model="dateLimit"></DatePicker>
      </FormItem>
      <FormItem label="容纳人数:"  style="width: 20vw" prop="cuVenuesPeopleNumber">
        <InputNumber :max="500" :min="1" v-model="saveCuVenuesBO.cuVenuesPeopleNumber" style="width: 15.5vw" placeholder="请输入容纳人数"></InputNumber>
      </FormItem>
      <FormItem label="场馆地点:"  style="width: 20vw" prop="cuVenuesAddress">
        <Input v-model="saveCuVenuesBO.cuVenuesAddress" placeholder="请输入场馆地点"></Input>
      </FormItem>
      <FormItem label="联系电话:"  style="width: 20vw" prop="cuVenuesPhone">
        <Input v-model="saveCuVenuesBO.cuVenuesPhone" placeholder="请输入联系电话"></Input>
      </FormItem>
      <FormItem label="场地设施:"  style="width: 20vw" prop="cuVenuesFacilities">
        <Input v-model="saveCuVenuesBO.cuVenuesFacilities" placeholder="请输入场地设置"></Input>
      </FormItem>
      <FormItem label="是否可预约">
        <i-switch size="large" @on-change="change" v-model="switch1">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </FormItem>
      <FormItem label="添加封面(最多4张):" >
        <div  v-for="(item,index) in uploadList">
        <div class="demo-upload-list" v-if="hasImage">
          <img :src="item"  />
          <div class="demo-upload-list-cover">
            <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
            <Icon type="ios-trash-outline" @click.native="handleRemove(item,index)"></Icon>
          </div>
        </div>
        </div>
        <Upload
          :default-file-list="defaultList"
          :action="actionUrl"
          :format="['jpg','jpeg','png']"
          :max-size="204800"
          :before-upload="maxSize"
          :on-exceeded-size="handleMaxSize"
          :on-success="handleSuccess"
          :show-upload-list="false"
          style=" width:58px;">
          <Button icon="ios-cloud-upload-outline">上传图片</Button>
        </Upload>
      </FormItem>
      <FormItem label="服务内容:">
        <editor :cache="false" ref="editor" :value="saveCuVenuesBO.cuVenuesContent" @on-change="handleChange"/>
      </FormItem>
      <FormItem >
        <Button type="primary" @click="save('formValidate')">保存</Button>
      </FormItem>
    </Form>
    <Modal title="图片预览" v-model="visible">
      <img :src="showImageUrl" v-if="visible" style="width: 100%" />
    </Modal>
  </Card>
</template>

<script>
import Editor from '_c/editor/editor'
export default {
  name: 'venues-add',
  components: { Editor },
  data () {
    return {
      uploadList: [],
      defaultList: [],
      dateLimit: [],
      options3: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      switch1: true,
      cuVenuesId: null,
      visible: false,
      actionUrl: this.$all.baseUploadURL + '/me-minio/uploadImages',
      imageUrl: '',
      hasImage: false,
      cuVolunteersId: '',
      showImageUrl: '',
      cityList: [],
      cuVenuesOpenTime: [],
      dateList: [
        {
          value: 1,
          label: '周一'
        },
        {
          value: 2,
          label: '周二'
        },
        {
          value: 3,
          label: '周三'
        },
        {
          value: 4,
          label: '周四'
        },
        {
          value: 5,
          label: '周五'
        },
        {
          value: 6,
          label: '周六'
        },
        {
          value: 7,
          label: '周日'
        }
      ],
      saveCuVenuesBO: {
        cuVenuesId: null,
        cuVenuesCategoryId: 1, // 科室ID
        cuVenuesTitle: '', // 标题
        cuVenuesImg: '', // 封面
        cuVenuesAddress: '', // 场馆地点
        cuVenuesPeopleNumber: 0, // 容纳人数
        cuVenuesPhone: '', // 联系电话
        cuVenuesFacilities: '', // 场地设施
        cuVenuesContent: '', // 内容
        cuVenuesIs: 0, // 是否可预约
        cuVenuesOpenDate: null, // 开始时间
        cuVenuesEndDate: null, // 结束时间
        cuVenuesCateg: ''// 分类

      },
      ruleValidate: {
        cuVenuesCateg: [
          { required: true, message: '分类不能为空', trigger: 'blur' }
        ],
        cuVenuesTitle: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        cuVenuesAddress: [
          { required: true, message: '场馆地点不能为空', trigger: 'blur' }
        ],
        cuVenuesPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ],
        cuVenuesFacilities: [
          { required: true, message: '场地设施不能为空', trigger: 'blur' }
        ],
        cuVolunteersTitle: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        cuVolunteersPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ],
        cuVenuesOpenTime: [
          { required: true, message: '时间段不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    maxSize (event, file, fileList) {
      if (this.uploadList.length >= 4) {
        this.$Message.error('图片最多为4张!!')
        return false
      }
    },
    change (status) {
      this.saveCuVenuesBO.cuVenuesIs = this.isBoolean(status)
    },
    save (name) {
      let url = 'saveOne'
      if (this.cuVenuesId) {
        url = 'updateOne'
      }
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.saveCuVenuesBO.cuVenuesImg = JSON.stringify(this.uploadList)
          this.saveCuVenuesBO.cuVenuesOpenDate = this.dateLimit[0]
          this.saveCuVenuesBO.cuVenuesEndDate = this.dateLimit[1]
          this.$axios_supermall.post('/cu-venues/' + url, this.saveCuVenuesBO).then(resp => {
            if (resp.data.code == 0) {
              this.$Message.success('处理成功')
              setTimeout(() => {
                this.$router.push({ path: '/venues_t/venues_list' })
              }, 1000)
            } else {
              this.$Message.error(resp.data.msg)
            }
          })
        } else {
          (valid)
        }
      })
    },
    handleChange (html, text) {
      this.saveCuVenuesBO.cuVenuesContent = html
    },
    handleSuccess (res, file) {
      this.imageUrl = res
      this.hasImage = true
      this.uploadList.push(res)
      // this.saveCuVenuesBO.cuVenuesImg = res;
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '图片大小限制',
        desc: '文件 ' + file.name + '太大,不能超过 2M.'
      })
    },
    handleView (imageUrl) {
      this.showImageUrl = imageUrl
      this.visible = true
    },
    handleRemove (item, index) {
      this.uploadList.splice(index, 1)
      // this.hasImage = false
    },
    queryOne () {
      this.$axios_supermall.post('/cu-venues/queryOne', this.cuVenuesId).then(resp => {
        if (resp.data.code == 0) {
          this.saveCuVenuesBO = resp.data.data
          let date = []
          date.push(this.saveCuVenuesBO.cuVenuesOpenDate)
          date.push(this.saveCuVenuesBO.cuVenuesEndDate)
          this.dateLimit = date;
          // this.saveCuVenuesBO.cuVenuesOpenDate = JSON.parse(this.saveCuVenuesBO.cuVenuesOpenDate);
          (this.saveCuVenuesBO.cuVenuesOpenDate)
          if (this.saveCuVenuesBO.cuVenuesIs == 0) {
            this.switch1 = true
          } else {
            this.switch1 = false
          }
          this.imageUrl = this.saveCuVenuesBO.cuVenuesImg
          this.hasImage = true
          this.$refs.editor.setHtml(this.saveCuVenuesBO.cuVenuesContent)
        }
        this.uploadList = JSON.parse(this.saveCuVenuesBO.cuVenuesImg)
        console.log(this.uploadList)
      })
    },
    isBoolean (boo) {
      if (boo) {
        return 0
      } else {
        return 1
      }
    },
    queryCat () {
      this.$axios_supermall.post('/cu-venues-category/queryList').then(resp => {
        if (resp.data.code == 0) {
          this.cityList = resp.data.data
        }
      })
    }
  },
  mounted () {
    this.cuVenuesId = this.$route.params.id
    if (this.$route.params.id) {
      this.queryOne()
    }
    this.queryCat()
  }
}
</script>

<style scoped>
.demo-upload-list {
  display: inline-block;width: 500px;height: 300px;text-align: center;line-height: 60px;
  border: 1px solid transparent;border-radius: 4px;overflow: hidden;background: #fff;
  position: relative;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;height: 100%;
}
.demo-upload-list-cover {
  display: none;position: absolute;top: 0;bottom: 0;
  left: 0;right: 0;background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;font-size: 20px;cursor: pointer;margin: 0 2px;
}
</style>
